import React,{memo, useEffect, useState} from 'react'
import { connect } from 'react-redux';
import { renderRoutes } from 'react-router-config';
import {NavLink,Link, useLocation} from 'react-router-dom'
import {
    TabBarContainer,
    TabItem,
} from './style.js'
import cartActive from '@/assets/tab-bar/cart-active.png'    
import cart from '@/assets/tab-bar/cart.png'    
import cate from '@/assets/tab-bar/cate.png'    
import cateActive from '@/assets/tab-bar/cate-active.png'    
import homeActive from '@/assets/tab-bar/home-active.png'    
import home from '@/assets/tab-bar/home.png'    
import userActive from '@/assets/tab-bar/user-active.png'    
import user from '@/assets/tab-bar/user.png'    

const Bottom = (props) => {
    const { route } = props
    let {pathname} = useLocation()
    let index = route.routes.findIndex((item) => item.path == pathname)-1
    const {totalnum} = props;
    
    return (
        <>
            <TabBarContainer>
                <TabItem>
                    <Link to="/home/main">
                    {
                        index === 0 ? <img src={homeActive} alt="" />: <img src={home} alt="" />
                    }
                     <div style={index===0?{color: '#ec564b'}:{}}>首页</div>
                    </Link>
                </TabItem>
                <TabItem>
                    <NavLink to="/home/classify"  >
                    {
                        index === 1 ? <img src={cateActive} alt="" />: <img src={cate} alt="" />
                    }
                     <div style={index===1?{color: '#ec564b'}:{}}>分类</div>
                    </NavLink>
                </TabItem>
                <TabItem>
                    <NavLink to="/home/shopcar"  >
                    {
                        index === 2 ? <img src={cartActive} alt="" />: <img src={cart} alt="" />
                    }
                     <div style={index===2?{color: '#ec564b'}:{}}>购物车</div>
                     <div className="number">{totalnum}</div>
                    </NavLink>
                </TabItem>
                <TabItem>
                    <NavLink to="/home/person" >
                    {
                        index === 3 ? <img src={userActive} alt="" />: <img src={user} alt="" />
                    }
                     <div style={index===3?{color: '#ec564b'}:{}}>个人</div>
                    </NavLink>
                </TabItem>
            </TabBarContainer>
            {renderRoutes(route.routes)}
        </>
    )
}

const mapStateToProps = (state) =>{
    return {
        totalnum: state.shopcar.totalnum,    
    }
}
export default connect(mapStateToProps,{})(Bottom)